<template>
	<view class="question2" :class="{background:flag}">
		<view class="top">
			<image src="/static/icon/white-back.png" @tap="nav" />
			<view>退款售后</view>
		</view>
		<view class="tab">
			<view class="tab-item" @tap="changeList(item)" v-for="(item, index) in tab" :key="index">
				<view :class="{ text: show == item.type }">{{ item.name }}</view>
				<view class="bor" :class="{ active: show == item.type }"></view>
			</view>
		</view>
		<view class="order" v-if="!flag">
			<view class="order_item" v-for="(item, index) in lists" :key="index">
				<view class="box1">
					<view class="box1_left">
						<view class="title">{{ item.room_no + item.room_type }} {{ item.storey + '楼' }}</view>
						<view class="room">{{ item.room_type_alias }} {{ item.amount }} 元</view>
					</view>
					<view class="box1_right uni-clearfix">
						<view style="color: #f7310c;" v-if="item.state_alias">{{ item.state_alias }}</view>
						<image class="img" src="/static/personal-center/right.png"></image>
					</view>
				</view>
				<view class="box2">
					<view class="box2_left">退款申请：{{ item.time }}</view>
					<view class="box2_right">
						<view class="box2_right_b" v-if="item.handle_style == 'refund'" @tap="coupleBack(item)">退款详情</view>
						<view class="box2_right_b" v-if="item.handle_style == 'clean'" @tap="coupleBack(item)">查看信息</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="flag" class="show">
			<view class="show_null"><image src="/static/bg/null.png" mode=""></image></view>
			<view class="title">你还没有此类订单哦</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
export default {
	data() {
		return {
			lists: [],
			show: 100,
			flag: true,
			tab: [{ name: '全部', type: 100 }, { name: '审核中', type: '0' }, { name: '审核通过', type: '1' }]
		};
	},
	onLoad() {
		this.dataE(100);
	},
	methods: {
		nav() {
			uni.navigateBack();
		},
		changeList(e) {
			console.log(e);
			this.show = e.type;
			this.dataE(e.type);
		},
		dataE(e) {
			let data;
			if (e == 100) {
				data = {
					position: 2,
					refund: 1,
					hid: this.isLogin().hotel_id
				};
			} else {
				data = {
					position: 2,
					refund: 1,
					hid: this.isLogin().hotel_id,
					feedback_state: e
				};
			}
			this.getReq({
				url: 'both/Order',
				data: data
			}).then(data => {
				let [err, res] = data;
				if (err, res.data.data.data.total == 0) {
					this.flag = true;
					return;
				}
				this.lists = res.data.data.data.list;
				this.lists.forEach(val => {
					val.time = moment(val.create_time * 1000).format('YYYY-MM-DD HH:mm');
				});
				this.flag = false;
			});
		},
		coupleBack(e) {
			/**
			 * 跳转详情页
			 */
			if(e.handle_style == 'refund'){  //退款
				uni.navigateTo({
					url: './question5?id=' + e.id
				});
			}else{//重新打扫
				uni.navigateTo({
					url: './question6?id=' + e.id
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.background{
	background-color:#fff !important;
}
.question2 {
	color: #333333;
	min-height: 100vh;
	background-color: #f8f8f8;
	.top {
		width: 750upx;
		padding-top: var(--status-bar-height);
		height: 86upx;
		background-color: #3595f9;
		position: fixed;
		left: 0;
		top: 0;
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 86upx;
		image {
			position: absolute;
			width: 32upx;
			height: 32upx;
			left: 27upx;
			bottom: 27upx;
		}
	}
	.tab {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 86upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 136upx;
		/* #endif */
		left: 0;
		z-index: 99;
		background-color: #fff;
		width: 750upx;
		height: 78upx;
		border-top: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab-item {
			display: inline-block;
			text-align: center;
			font-size: 32upx;
			line-height: 32upx;
			color: #999999;
			line-height: 72upx;
			vertical-align: text-top;
			.text {
				color: #3595f9;
			}
			.bor {
				margin: 0 auto;
				width: 60upx;
				height: 6upx;
				background-color: #fff;
				border-radius: 2upx;
			}
			.active {
				margin: 0 auto;
				width: 60upx;
				height: 6upx;
				background-color: #3595f9;
				border-radius: 2upx;
			}
		}
	}
	.order::before {
		display: block;
		/* #ifdef APP-PLUS */
		height: calc(var(--status-bar-height) + 164upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 214upx;
		/* #endif */
		width: 750upx;
		content: '';
	}
	.order {
		color: #333333;
		/* #ifdef APP-PLUS */
		min-height: calc(100vh - var(--status-bar-height) - 164upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		min-height: calc(100vh - 214upx);
		/* #endif */
		width: 702upx;
		padding: 24upx;
		z-index: 99;
		.order_item {
			width: 646upx;
			height: 206upx;
			background-color: #ffffff;
			box-shadow: 2upx 2upx 20upx 0 rgba(0, 0, 0, 0.15);
			border-radius: 8upx;
			margin-bottom: 22upx;
			padding: 28upx;
			line-height: 1;

			.box1 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #e5e5e5;

				.box1_left {
					.title {
						font-size: 32upx;
						line-height: 58upx;
					}

					.room {
						font-size: 28upx;
						line-height: 54upx;
						color: #999999;
					}
				}

				.box1_right {
					font-size: 24upx;
					color: #f7310c;
					line-height: 58upx;

					.ac {
						color: #999999;
					}

					.img {
						width: 14upx;
						height: 24upx;
						padding: 15upx 0;
						float: right;
					}
				}
			}

			.box2 {
				width: 100%;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: center;

				.box2_left {
					width: 280upx;
					height: 40upx;
					background-color: #f8f8f8;
					border-radius: 8upx;
					font-size: 20upx;
					color: #999999;
					line-height: 40upx;
				}

				.box2_right {
					display: flex;

					.box2_right_a {
						width: 160upx;
						height: 60upx;
						font-size: 24upx;
						border-radius: 8upx;
						line-height: 60upx;
						color: #999;
						border: solid 2upx #e5e5e5;
					}
					.box2_right_q {
						width: 160upx;
						height: 60upx;
						font-size: 24upx;
						border-radius: 8upx;
						line-height: 60upx;
						border: solid 2upx #e5e5e5;
						color: #999;
						margin-left: 20upx;
					}
					.box2_right_b {
						width: 160upx;
						height: 60upx;
						font-size: 24upx;
						border-radius: 8upx;
						line-height: 60upx;
						border: solid 2upx #3595f9;
						color: #3595f9;
						margin-left: 20upx;
					}
				}
			}
		}
	}
	.show {
		position: fixed;
		top: 30%;
		background-color: #ffffff;
		left: 202upx;
		z-index: 9;
		.show_null {
			image {
				width: 345upx;
				height: 310upx;
			}
		}
		.title {
			text-align: center;
			font-size: 24upx;
			color: #999;
		}
	}
}
</style>
